<template>
  <div class="todo-page">
    <div v-for="(item, index) in list" :key="index" class="todo-item">
      <div class="todo-item-info">
        <div class="todo-item__title">{{ item.title }}</div>
        <div class="todo-item__tag">{{ item.tag }}</div>
      </div>
      <van-button type="primary" color="linear-gradient(to right, #f77f2c, #f2bd3b)" round class="todo-item__btn" @click="toPage(item)">{{ item.btn }}</van-button>
    </div>
    <img class="todo-img" src="./imgs/img-text.png" mode="widthFix">
  </div>
</template>

<script>
import { Button } from 'vant'
import Taro from '@tarojs/taro'

export default {
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      list: [
        { title: '完成健康打卡', tag: '脑力值 +3分/次', btn: '去打卡', url: 'daily' },
        { title: '完成健康知识学习', tag: '脑力值 +5分/次(未答题 +3分/次)', btn: '去学习', url: 'knowledge', type: 1 },
        { title: '完成并发布艺术课堂作业', tag: '脑力值 +20分/次', btn: '去发布', url: 'lesson' },
        { title: '艺术作业互动点评', tag: '脑力值 点赞+1分/次 评论+2分/次', btn: '去互动', url: 'moment' },
        { title: '居家运动', tag: '脑力值视运动时长加分', btn: '去运动', url: 'knowledge', type: 2 },
        { title: '认知训练', tag: '脑力值视训练时长加分', btn: '去训练', url: 'list', type: 'game' },
        { title: '健康测评', tag: '脑力值 +5分/份', btn: '去测试', url: 'exam' }
      ]
    }
  },
  methods: {
    toPage(item, id, type) {
      let query = ''
      if (id) {
        query = `id=${id}&type=${type}`
      }
      if (typeof item === 'string') {
        item = { url: item }
      } else if (item.type) {
        query = 'type=' + item.type + '&title=' + item.title
      }
      Taro.navigateTo({
        url: `/pages/${item.url}/index?${query}`
      })
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
